﻿<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <div class="schoolBoxCont">
          <div class="schoolBoxContItem">
            <el-form-item label prop="phone">
              <div class="schoolBoxContItemTitle">
                微信号
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.unionid"
                  placeholder="微信号"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
        
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                昵称
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.nickName"
                  placeholder="昵称"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                资源状态
              </div>
              <div class="schoolBoxContItemInput">
                <el-select
                  v-model="queryBox.resourcesState"
                  clearable
                  filterable
                  @change="changeThree"
                >
                  <el-option
                    v-for="item in doType_option"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                手机号
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.mobile"
                  placeholder="手机号"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                消费金额
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.consumeCountStart"
                  placeholder="请输入"
                >
                </el-input>
              </div>
              ——
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.consumeCountEnd"
                  placeholder="请输入"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="from-btns">
      <kt-button
        :label="$t('action.reset')"
        perms="true"
        type="primary"
        @click="reset('queryBox')"
      />
      <kt-button
        :label="$t('action.search')"
        perms="true"
        type="primary"
        @click="search"
      />
    </div>


    <!--表格内容栏-->
    <Crm-table
      class="table-width"
      WechatResources
      width="400"
      :showBatchDelete="false"
      permsBind="ResourceCollectionPool:WechatResources:Synchronous"
      :data="pageResult"
      :columns="columns"
      :loading="loading"
      @handleReceive="handleReceive"
      @findPage="findPage"
    ></Crm-table>
  </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import { regionDataPlus } from "element-china-area-data";
import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "Promote",
  components: {
    CrmTable,
    KtButton,
  },
  data() {
    return {
      aa: true,
      loading:false,
      checkedPeson: 0,
      size: "small",
      // filters: {
      //   name: ""
      // },
      // 查询条件
      student_data_from_options: [
        {
          label: " ",
          key: " "
        }
      ],
      student_type_options: [],
      student_progress_options: [
        {
          label: " ",
          key: " "
        }
      ],
      student_data_from_type_options: [
        {
          label: " ",
          key: " "
        }
      ],
      queryBox: {
        nickName:'',
        unionid:'',
        mobile:'',
        consumeCount:'',
        resourcesState:'',
        pushResult:'',
        consumeCountStart:'',
        consumeCountEnd:''
      },
      //   地区
      options: regionDataPlus,
      selectedOptions: [],
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "unionid", label: "微信号", minWidth: 80 },
        { prop: "nickName", label: "昵称", minWidth: 100 },
        { prop: "mobile", label: "手机号", minWidth: 190 },
        { prop: "consumeCount", label: "累计消费金额", minWidth: 100 },
        { prop: "pushResult", label: "同步结果", minWidth: 220 }
      ],
      assigner: "",
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      student_type_options: [],
      operation: true, // true:新增, false:编辑
      batchdistribution: false, //显示批量分配弹窗
      customerownership: false, //显示客户归属弹窗
      selectionsLength: "",
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: [],
      selections: [], //选中列表集合
      ids: [], //分配ID集合
      ids2: [],
      equipment_options:[
        {
          value: "PC",
          key: "1"
        },
        {
          value: "移动",
          key: "2"
        }
      ],
      pushState_options:[
        {
          value: "未推送",
          key: "0"
        },
        {
          value: "成功",
          key: "1"
        },
        {
          value: "失败",
          key: "2"
        }
      ],
      school_option:[],
      grade_options:[],
      subject_options:[],
      SF_options:[]
    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // 获取下拉
    findDownList(){
      this.doType_option=JSON.parse(localStorage.getItem('studentWechatState'))
      
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.$api.student
        .studentWechatUserList(this.queryBox)
        .then(res => {
          let content = { content: res.data, totalSize: res.total };
          this.pageResult = content;
          this.pageResult.content.forEach(item => {
            item.diqu=item.province+item.city+item.area+(item.areaInput==null?'':item.areaInput)
            //同步状态转义
            this.pushState_options.forEach(pushItem=>{
              if(pushItem.key==item.pushState){
                item.pushState2=pushItem.value
              }
            })
            // 设备转义
            this.equipment_options.forEach(equipmentItem=>{
              if(equipmentItem.key==item.equipment){
                item.equipment=equipmentItem.value
              }
            })
            // 累计消费金额
          });
          this.loading = false;
        })
        .then(data != null ? data.callback : "");
    },
    // 加载用户角色信息
    // findUserRoles: function() {
    //   this.$api.role.findAll().then(res => {
    //     // 加载角色集合
    //     this.roles = res.data;
    //   });
    // },
    // 重置
    reset(queryBox) {
      this.loading=true
      this.$refs.queryBox.resetFields();
      this.queryBox.unionid=''
      this.queryBox.nickName=''
      this.queryBox.mobile=''
      this.queryBox.consumeCount=''
      this.queryBox.resourcesState=''
      this.queryBox.pushResult=''
      this.queryBox.consumeCountStart=''
      this.queryBox.consumeCountEnd=''
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // 同步
    handleReceive(params) {
      this.$api.student
        .wechatPushToCRM({
          id: params.row.id
        })
        .then(res => {
          if (res.result == 2) {
            this.$message({
              message: res.msg,
              type: "error"
            });
          } else if (res.result == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.findPage(null);
          }
        });
    },
    


  },
  mounted() {
    this.findDownList();
  }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.checked-person {
  margin-top: -10%;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}

.el-dialog__wrapper .el-form-item__content {
  margin-left: 0;
}
.demo-form-inline {
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input {
    width: 93% !important;
  }
  .el-select {
    width: 100% !important;
  }
  .tit {
    display: inline-block;
    margin-top: 10%;
  }
}
.el-dialog__body {
  overflow: hidden;
}
</style>
<style lang="scss">
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
.schoolBoxCont {
  margin: 5px 5px;

  .schoolBoxContItem {
    margin-right: 10px;
    float: left;
    .el-form-item__content {
      display: flex;
      flex-direction: row;
    }
    .schoolBoxContItemTitle {
      background: #f5f7fa;
      width: 115px;
      border: 1px solid #dcdfe6;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      line-height: 39px;
      border-right: none;
    }
    .schoolBoxContItemInput {
      width: 150px;
      line-height: 39px;
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
    .schoolBoxContItemInput2 {
      width: 350px;
      line-height: 39px;
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
  }
}
</style>
